@import "main.css"

rem(pixel)
  (pixel / 750 / 2) * 10

html
  font-size 75px

body 
  font-size rem(26rem)

div.show 
  display flex

div.hidden 
  display none

.empty
  display flex
  justify-content center
  align-items center
  margin 30px 0

.empty-img,
.empty-p
  font-size 13px
  color #b6b6b6
  width 30px
  height 30px
  line-height 30px
  margin 0 10px

.search-btn
  padding rem(16rem) rem(20rem)
  background-color #EFEFF4

.search-btn-content
  display flex
  width 100%
  height rem(40rem)
  border-radius 6px
  box-sizing border-box
  justify-content center
  align-items center
  background-color #fff
  color #888

.search-btn-content:before
  content ''
  width rem(20rem)
  height rem(20rem)
  background-image url('../img/search.png')
  background-size 100% 100%
  background-repeat no-repeat
  background-position center center
  margin-right rem(12rem)


.search-container
  position fixed
  top 0
  left 0
  bottom 0
  right 0
  overflow-y scroll
  display none

.search-mask
  position absolute
  left 0
  right 0
  top 0
  bottom 0
  background-color #444
  opacity .6
  z-index -1


.search-content
  background-color #fff

.search-header
  border-bottom 1px solid #e6e6e6
  display flex
  height rem(60rem)
  line-height rem(60rem)
  padding rem(20rem)
  justify-content space-between

.search-header-addr 
  width rem(200rem)
  display inline-block
  text-align center

.search-header-addr-icon 
  display inline-block
  width rem(40rem)

.search-header-type
  text-align center
  border-left 1px solid #ccc

.search-header-trigon:after
  content ''
  position relative
  top rem(-2rem)
  width 0
  height 0
  border-top 6px solid #444
  border-left 3px solid transparent
  border-right 3px solid transparent
  margin-left rem(12rem)
  display inline-block
  transition .8s all

.search-header-trigon-select
  color #4CA0FE

.search-header-trigon-select:after
  transform rotate(180deg)
  border-top-color #76c3ff

.search-header-type
  flex 1


.search-body
  margin-top rem(20rem)

.search-cells
  padding rem(20rem)

.search-cell-title 
  font-size rem(26rem)

.search-cell-subtitle
  color #b6b6b6

.search-cell-items
  margin-top 2px
  margin-bottom 16px

.search-cell-item
  position relative
  width rem(152rem)
  height rem(62rem)
  line-height rem(62rem)
  overflow hidden
  text-overflow ellipsis
  white-space nowrap
  text-align center
  padding 0 rem(10rem)
  box-sizing border-box
  margin-top 12px
  margin-right rem(20rem)
  border 1px solid #e6e6e6
  display inline-block
  &:nth-child(4n) 
    margin-right 0

.search-cell-item-select
  border-color #76c3ff
  color #76c3ff

.search-cell-item-select:before 
  content ''
  position absolute
  right 0
  bottom 0
  width 0
  height 0
  border-right 16px solid #76c3ff
  border-top 16px solid transparent

.search-cell-item-select:after 
  content ''
  position absolute
  right 0
  bottom 0
  width 8px
  height 8px
  background-image url('../img/dui.png')
  background-repeat no-repeat
  background-size 100% 100%
  background-position center

.search-addr
  display none

.search-addr-tab
  border-bottom 1px solid #7AA9C7

.search-addr-tab label
  display inline-block
  width rem(224rem)
  height 30px
  line-height 30px
  margin-left 15px
  background-color #F2F7FC
  text-align center
  border-radius 6px 6px 0 0

label.search-addr-tab-select
  background-color #509FFB
  color #ACDFF3

.search-addr-list
  display flex
  flex-wrap wrap

.search-addr-item
  position relative
  display inline-block
  flex 0 0 25%
  height rem(100rem)
  line-height rem(100rem)
  text-align center
  border-bottom 1px solid #ccc
  &:nth-child(4n)
    border-right none
  &:after
    content " "
    position absolute
    right 0
    top 0
    width 1px
    bottom 0
    border-right 1px solid #ccc
    color #ccc
    -webkit-transform-origin 100% 0
    transform-origin 100% 0
    -webkit-transform scaleX(0.5)
    transform scaleX(0.5)

.search-footer
  display flex
  margin-top 40px

.search-footer-reset,
.search-footer-submit
  cursor pointer
  padding 8px 0
  text-align center
  transition all .5

.search-footer-reset:active,
.search-footer-submit:active
  opacity .75

.search-footer-reset
  flex 1
  margin-right rem(30rem)
  border 1px solid #bbb


.search-footer-submit
  flex 4
  color #fff
  background #27a1ff
  border 1px solid #27a1ff

.result-item
  background-color #fff
  margin 10px
  padding 15px
  border-radius 6px
  display block

.result-item-content
  display flex
  margin rem(10rem) 0
  text-align center
  color #bbb
  padding 15px 0
  border-bottom 1px solid #bbb

.result-item-left,
.result-item-center,
.result-item-right 
  flex 1

.result-item-province
  font-size 12px

.result-item-city
  font-size 18px
  color #444
  margin 6px 0

.result-item-time
  font-size 14px

.result-item-center
  align-self center

.result-item-center-icon
  height 30px

.result-item-info
  display flex
  margin-top 12px
  color #bbb
  justify-content center
  text-align center
  font-size 16px
  align-items baseline

.result-item-info div 
  flex 1

.result-item-info-center
  font-size 18px
  font-weight bold

.result-item-title
  font-size 14px

/*detail*/
.detail-container
  max-width 660px
  margin 0 auto
  font-size rem(32rem)
  color #3c3c3c
  background-color #fff

.detail-title
  padding rem(40rem) rem(40rem) rem(10rem)
  font-size rem(40rem)
  color #888

.detail-header
  background-color #e6e6e6
  margin 0 rem(20rem)
  padding rem(20rem)
  border 1px solid #b6b6b6
  border-radius 4px

.detail-header-middle
  margin rem(30rem) auto
  text-align center

.detail-header-timer
  margin-top rem(20rem)
  font-size rem(72rem)
  font-weight bold

.detail-header-bottom
  display flex
  justify-content space-around
  flex-wrap wrap
  & p
    width 50%
    text-align center

.detail-content-row
  padding rem(20rem) rem(40rem)
  border-bottom 1px solid #e6e6e6
  display flex
  justify-content space-between

.detail-content-row-key
  font-weight bold

.detail-content-row-value
  color #b6b6b6

.download
  position fixed
  top 0
  left 0
  width 100%
  background-color #ffe137
  padding .1rem
  box-sizing border-box
  text-align center
  opacity .9
  display none
  img
    width .5rem
    height .5rem
    margin-right .3rem
  label
    color #444
    font-size .2rem
    